<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import { Page } from '@vben/common-ui';

import { useFs } from '@fast-crud/fast-crud';

import { BasicTree } from '#/components/tree';

import { createCrudOptions } from '../data/application-list-crud';

defineOptions({
  name: '企业的应用维护',
  inheritAttrs: false,
});

const { currentRoute } = useRouter();
const tenantId = ref<string>();
const { crudRef, crudBinding, crudExpose } = useFs({
  createCrudOptions,
  context: { tenantId },
});

// 页面打开后获取列表数据
onMounted(async () => {
  const { params } = currentRoute.value;
  tenantId.value = params.id as string;

  // crudExpose.setSearchFormData({ form: { tenantId: tenantId.value } });
  crudExpose.doRefresh();
});
</script>

<template>
  <Page auto-content-height>
    <FsCrud ref="crudRef" v-bind="crudBinding">
      <template #form_resourceIdList="scope">
        <BasicTree
          v-model:value="scope.form.resourceIdList"
          :tree-data="scope.form.resourceList"
          :field-names="{ key: 'id', title: 'name' }"
          :checked-keys="scope.form.checkedList"
          :expanded-keys="scope.form.checkedList"
          checkable
          toolbar
          :toolbar-strictly="false"
          search
        />
      </template>
    </FsCrud>
  </Page>
</template>
